<template>
    <div class="home">
        <!-- 第一个盒子 -->
        <div class="frist-box">
            <!-- 车辆总数 -->
            <div class="car-total">
                <div class="icon" style="background-color: #0080eb;">
                    <img src="@/assets/car.png" style="height: 100%; width: auto" />
                </div>
                <div class="detail">
                    <p>当前车辆总数（辆）</p>
                    <strong>{{ carNum }}</strong>
                </div>
            </div>
            <!-- 里程数 -->
            <div class="km-total">
                <div class="icon" style="background-color: #56ca33;">
                    <img src="@/assets/flag.png" style="height: 100%; width: auto" />
                </div>
                <div class="detail">
                    <p>里程（公里/天）</p>
                    <strong>{{ mileage }}</strong>
                </div>
            </div>
            <!-- AI报警总数 -->
            <div class="ai-alert">
                <div class="icon" style="background-color: #ffb324;">
                    <img src="@/assets/alert.png" style="height: 100%; width: auto" />
                </div>
                <div class="detail">
                    <p>AI报警总数</p>
                    <strong>{{ alertNum }}</strong>
                </div>
            </div>
            <!-- ADAS报警总数 -->
            <div class="adas-alert">
                <div class="icon" style="background-color: #ff7224;">
                    <img src="@/assets/adas.png" style="height: 100%; width: auto" />
                </div>
                <div class="detail">
                    <p>ADAS报警总数</p>
                    <strong>{{ adasNum }}</strong>
                </div>
            </div>
            <!-- DSM报警总数 -->
            <div class="dsm-alert">
                <div class="icon" style="background-color: #eb0037;">
                    <img src="@/assets/dsm.png" style="height: 100%; width: auto" />
                </div>
                <div class="detail">
                    <p>DSM报警总数</p>
                    <strong>{{ dsmNum }}</strong>
                </div>
            </div>
            <!-- 查看日期选择器 -->
            <div style="margin-top: 20px">
                <el-radio-group v-model="radio" size="small">
                <el-radio-button label="过去一天"></el-radio-button>
                <el-radio-button label="近七天"></el-radio-button>
                <el-radio-button label="近30天"></el-radio-button>
                </el-radio-group>
            </div>
        </div>

        <!-- 报警排名显示框 -->
        <div id="alertTop"></div>
        <div style="margin-top: 20px" class="alertTop">
            <el-radio-group v-model="radio1" size="small">
            <el-radio-button label="最好"></el-radio-button>
            <el-radio-button label="最差"></el-radio-button>
            </el-radio-group>
        </div>

        <!-- 报警趋势 -->
        <div id="alertTend"></div>
        <div style="margin-top: 20px" class="alertTend">
            <el-radio-group v-model="radio2" size="small">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="ADAS"></el-radio-button>
            <el-radio-button label="DSM"></el-radio-button>
            </el-radio-group>
        </div>

        <!-- 扣分前十 -->
        <div id="pointTop"></div>
        <div style="margin-top: 20px" class="pointTop">
            <el-radio-group v-model="radio3" size="small">
            <el-radio-button label="最好"></el-radio-button>
            <el-radio-button label="最差"></el-radio-button>
            </el-radio-group>
        </div>

        <!-- 报警类型分布 -->
        <div id="typeLayout"></div>

        <!-- 公司报警排名 -->
        <div id="companyTop"></div>
        <div style="margin-top: 20px" class="companyTop">
            <el-radio-group v-model="radio4" size="small">
            <el-radio-button label="最好"></el-radio-button>
            <el-radio-button label="最差"></el-radio-button>
            </el-radio-group>
        </div>
    </div>
</template>

<script>
import kanbanApi from "@/api/kanban"

export default {
    data () {
      return {
        carNum: '',
        mileage: '',
        alertNum: '',
        adasNum: '',
        dsmNum: '',
        radio: "过去一天",
        radio1: "最好",
        radio2: "全部",
        radio3: "最好",
        radio4: "最好"
      };
    },
    mounted() {
        this.getKanban()
    },
    methods: {
        // 获取看板数据
        getKanban(){
            const token = localStorage.getItem('seeto-token')
            // 获取过去一天数据
            if(this.radio == "过去一天"){
                kanbanApi.yesterday(token).then(response => {
                    const resp = response.data
                    if(resp.flag){
                        var respD = response.data.data
                        this.carNum = respD.carNum
                        this.mileage = respD.mileage
                        this.alertNum = respD.alertNum
                        this.adasNum = respD.adasNum
                        this.dsmNum = respD.dsmNum
                        localStorage.setItem("seeto-kanban", JSON.stringify(respD))
                        this.alertTop()
                        this.alertTend()
                        this.pointTop()
                        this.typeLayout()
                        this.companyTop()
                    }else{
                        this.$message({
                        message: resp.message,
                        type: 'warning'
                        })
                    }
                })
                // 获取近七天数据
            }else if(this.radio == "近七天"){
                kanbanApi.week(token).then(response => {
                    const resp = response.data
                    if(resp.flag){
                        var respD = response.data.data
                        this.carNum = respD.carNum
                        this.mileage = respD.mileage
                        this.alertNum = respD.alertNum
                        this.adasNum = respD.adasNum
                        this.dsmNum = respD.dsmNum
                        localStorage.setItem("seeto-kanban", JSON.stringify(respD))
                        this.alertTop()
                        this.alertTend()
                        this.pointTop()
                        this.typeLayout()
                        this.companyTop()
                    }else{
                        this.$message({
                        message: resp.message,
                        type: 'warning'
                        })
                    }
                })
                // 获取近30天数据
            }else{
                kanbanApi.moon(token).then(response => {
                    const resp = response.data
                    if(resp.flag = true){
                        var respD = response.data.data
                        this.carNum = respD.carNum
                        this.mileage = respD.mileage
                        this.alertNum = respD.alertNum
                        this.adasNum = respD.adasNum
                        this.dsmNum = respD.dsmNum
                        localStorage.setItem("seeto-kanban", JSON.stringify(respD))
                        this.alertTop()
                        this.alertTend()
                        this.pointTop()
                        this.typeLayout()
                        this.companyTop()
                    }else{
                        this.$message({
                        message: resp.message,
                        type: 'warning'
                        })
                    }
                })
            }
            
        },

        // 车辆报警排名
        alertTop(){
            const resp = JSON.parse(localStorage.getItem('seeto-kanban'))
            if(this.radio1 == "最好"){
                var carList = resp.alertTop.good.car
                var timeList = resp.alertTop.good.time
            }else{
                var carList = resp.alertTop.bad.car
                var timeList = resp.alertTop.bad.time
            }
            let myChart = this.$echarts.init(document.getElementById('alertTop'))
            myChart.setOption({
                color: ['#3398DB'],
                title: {
                    text: '车辆报警排名（AI警报数/百公里）'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    X: 100,
                    Y2: 200,
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: carList,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                color: "balck",
                                fontSize: 12,
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        barWidth: '60%',
                        data: timeList
                    }
                ]
            })
        },

        // 报警趋势
        alertTend(){
            const resp = JSON.parse(localStorage.getItem("seeto-kanban"))
            if(this.radio2 == "全部"){
                var dateList = resp.alertTend.all.date
                var timeList = resp.alertTend.all.time
            }else if(this.radio2 == "ADAS"){
                var dateList = resp.alertTend.adas.date
                var timeList = resp.alertTend.adas.time
            }else{
                var dateList = resp.alertTend.dsm.date
                var timeList = resp.alertTend.dsm.time
            }
            let myChart = this.$echarts.init(document.getElementById('alertTend'))
            myChart.setOption({
                title: {
                    text: '报警趋势（AI报警/百公里）'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: dateList
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '报警趋势',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {},
                        data: timeList
                    }
                ]
            })
        },

        // 车辆扣分前十
        pointTop(){
            const resp = JSON.parse(localStorage.getItem("seeto-kanban"))
            if(this.radio3 == "最好"){
                var carList = resp.pointTop.good.car
                var pointList = resp.pointTop.good.point
            }else{
                var carList = resp.pointTop.bad.car
                var pointList = resp.pointTop.bad.point
            }
            let myChart = this.$echarts.init(document.getElementById('pointTop'))
            myChart.setOption({
                color: ['#3398DB'],
                title: {
                    text: '车辆扣分前十（AI警报数/百公里）'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    X: 100,
                    Y2: 200,
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: carList,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                color: "balck",
                                fontSize: 12,
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        barWidth: '60%',
                        data: pointList
                    }
                ]
            })
        },

        // 报警类型发布
        typeLayout(){
            const resp = JSON.parse(localStorage.getItem("seeto-kanban"))
            if(this.radio2 == "全部"){
                var nameList = resp.typeLayout.all.name
                var timeList = resp.typeLayout.all.time
            }else if(this.radio2 == "ADAS"){
                var nameList = resp.typeLayout.adas.name
                var timeList = resp.typeLayout.adas.time
            }else{
                var nameList = resp.typeLayout.dsm.name
                var timeList = resp.typeLayout.dsm.time
            }
            let myChart = this.$echarts.init(document.getElementById('typeLayout'))
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: nameList
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: timeList[0], name: nameList[0]},
                            {value: timeList[1], name: nameList[1]},
                            {value: timeList[2], name: nameList[2]},
                            {value: timeList[3], name: nameList[3]},
                            {value: timeList[4], name: nameList[4]}
                        ]
                    }
                ]
            })
        },

        // 公司报警排名
        companyTop(){
            const resp = JSON.parse(localStorage.getItem("seeto-kanban"))
            if(this.radio4 == "最好"){
                var companyList = resp.companyTop.good.company
                var timeList = resp.companyTop.good.time
            }else{
                var companyList = resp.companyTop.bad.company
                var timeList = resp.companyTop.bad.time
            }
            let myChart = this.$echarts.init(document.getElementById('companyTop'))
            myChart.setOption({
                color: ['#3398DB'],
                title: {
                    text: '公司报警排名（AI警报数/百公里）'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    X: 100,
                    Y2: 200,
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: companyList,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            textStyle: {
                                color: "balck",
                                fontSize: 12,
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        barWidth: '60%',
                        data: timeList
                    }
                ]
            })
        }
    },

    // 监听按钮变化
    watch: {
        radio: function(newValue, oldValue){
            this.getKanban()
        },
        radio1: function(newValue, oldValue){
            this.alertTop()
        },
        radio2: function(newValue, oldValue){
            this.alertTend()
            this.typeLayout()
        },
        radio3: function(newValue, oldValue){
            this.pointTop()
        },
        radio4: function(newValue, oldValue){
            this.companyTop()
        }
    }
}
</script>

<style scoped>
.frist-box{
    padding: 15px;
}
.frist-box::after{ content: ""; clear: both; display: block;}
.car-total, .km-total, .ai-alert, .adas-alert, .dsm-alert{
    width: 222.5px;
    height: 70px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    float: left;
    margin-right: 10px;
    border-radius: 5px;
}
.icon{
    margin-left: 30px;
    margin-top: 10px;
    height: 30px;
    width: 30px;
    padding: 10px;
    border-radius: 25px;
    float: left;
}
.detail{
    width: 120px;
    float: left;
    font-size: 12px;
    margin-left: 10px;
    text-align: center;
}
.detail p{
    margin-bottom: 5px;
}
.detail strong{
    width: 100%;
    font-size: 20px;
    color: #ffb324;
}

#alertTop{
    margin-top: 20px;
    margin-left: 15px;
    padding-top: 30px;
    float: left;
    width: 695px;
    height: 250px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 5px;
}
.alertTop{
    position: absolute;
    top: 110px;
    right: 725px;
}

#alertTend{
    margin-top: 20px;
    margin-left: 10px;
    padding-top: 30px;
    width: 695px;
    height: 250px;
    float: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 5px;
}
.alertTend{
    position: absolute;
    top: 110px;
    right: 20px;
}

#pointTop{
    margin-top: 20px;
    margin-left: 15px;
    padding-top: 30px;
    width: 500px;
    height: 250px;
    float: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 5px;
}
.pointTop{
    position: absolute;
    top: 410px;
    right: 920px;
}

#typeLayout{
    margin-top: 20px;
    margin-left: 10px;
    padding-top: 30px;
    width: 380px;
    height: 250px;
    float: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 5px;
}

#companyTop{
    margin-top: 20px;
    margin-left: 10px;
    padding-top: 30px;
    width: 500px;
    height: 250px;
    float: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 5px;
}
.companyTop{
    position: absolute;
    top: 410px;
    right: 20px;
}
</style>